<?php if( count($this->groups) > 0 ): ?>
    <span class="pull-right"><a href="<?php echo url('group/add') ?>">Add Group</a></span>
    <br /><br />
    <form id="main-form" style="display:none;" action="" method="get">
        <input type="hidden" name="sc" />
        <input type="hidden" name="so" />
        <input type="hidden" name="fc" />
        <input type="hidden" name="fv" />
    </form>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th style="width:150px;">
                    <a id="sort-group-id" href="id" style="display:block;text-decoration:none;">
                        #
                        <?php if ( $this->scol === 'id' ): ?>
                            <i class="pull-right glyphicon <?php if ( $this->sord === 'asc' ): ?>glyphicon-sort-by-order<?php else: ?>glyphicon-sort-by-order-alt<?php endif; ?>"></i>
                        <?php endif; ?>
                    </a>
                </th>
                <th>
                    <a id="sort-group-name" href="name" style="display:block;text-decoration:none;">
                        Group Name
                        <?php if ( $this->scol === 'name' ): ?>
                            <i class="pull-right glyphicon <?php if ( $this->sord === 'asc' ): ?>glyphicon-sort-by-alphabet<?php else: ?>glyphicon-sort-by-alphabet-alt<?php endif; ?>"></i>
                        <?php endif; ?>
                    </a>
                </th>
                <th style="width:70px;" class="text-center">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>
                    <input id="filter-group-name" name="name" type="text" class="form-control" placeholder="Filter by Group Name" value="<?php echo ($this->fcol === 'name') ? $this->fval : ''; ?>" />
                </td>
                <td></td>
            </tr>
            <?php foreach ($this->groups as $group): ?>
                <tr>
                    <td><?php echo $group['id']; ?></td>
                    <td><?php echo $group['name']; ?></td>
                    <td class="text-center">
                        <a href="<?php echo url('group/edit', array('id'=>$group['id'])); ?>" title="Edit Group"><i class="glyphicon glyphicon-edit"></i></a>
                        &nbsp;
                        <form style="display:inline-block;" action="<?php echo url('group/del'); ?>" method="post">
                            <input type="hidden" name="id" value="<?php echo $group['id']; ?>" />
                            <a class="lnk-del" href="#" title="Delete Group"><i class="glyphicon glyphicon-trash"></i></a>
                        </form>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
    <span class="pull-right"><a href="<?php echo url('group/add') ?>">Add Group</a></span>
<?php else: ?>
    <h4>There is no groups <small><a href="<?php echo url('group/add') ?>">Add Group</a></small></h4>
<?php endif; ?>

<script type="text/javascript">
    $(document).ready(function(){
        $('.lnk-del').click(function(event){
            event.preventDefault();
            if ( confirm('Are you shure?') ){
                $(this).parent('form').submit();
            }
        });
    });
    
    $('#sort-group-name, #sort-group-id').click(function(event){
        event.preventDefault();
        var form = $('#main-form');
        form.find('input[name="sc"]').val($(this).attr('href'));
        form.find('input[name="so"]').val('<?php echo ($this->sord === 'asc') ? 'desc' : 'asc'; ?>');
        form.find('input[name="fc"]').val('<?php echo $this->fcol; ?>');
        form.find('input[name="fv"]').val('<?php echo $this->fval; ?>');
        form.submit();
    });
    
    $('#filter-group-name').keypress(function(event){
        if ( event.keyCode === 13 ){
            var form = $('#main-form');
            form.find('input[name="so"]').val('<?php echo $this->sord; ?>');
            form.find('input[name="sc"]').val('<?php echo $this->scol; ?>');
            form.find('input[name="fc"]').val($(this).attr('name'));
            form.find('input[name="fv"]').val($(this).val());
            form.submit();
        }
    });
</script>